<!--个人信息-->
<template>
<div style="height:60vh">
  <el-row>
    <el-col :span="12" :offset="6">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
          </div>
        </template>
        <el-row justify="center">
          <el-col :span="6" style="height: 50%">
            <el-image style="width: 15vh; height: 7.5vw;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
          </el-col>
        </el-row>
        <el-row justify="center" style="margin-top: 2vh;">
          <el-col :span="12" :pull="1">
            <el-form
                label-position="right"
                label-width="40%"
                :model="userInfo"
            >
              <el-form-item label="用户名">
                <el-input v-model="userInfo.username" />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="userInfo.phone" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="userInfo.email" />
              </el-form-item>
              <el-form-item label="会员等级">
                <div style="text-align: center;width: 100%"> {{userInfo.level}}</div>

              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

      </el-card>
    </el-col>

  </el-row>

</div>
</template>

<script>
import axios from "axios";

export default {
  name: "PersonalInfo",
  data(){
    return {
      userInfo:{
        username:'',
        nickName:'',
        phone:'',
        email:'',
        level:''
      },
      level:['普通会员','月卡会员','季卡会员','年卡会员']
    }
  },
  methods:{
    init(){
      this.getPersonalInfo();
      console.log("初始化!")
    },
    getPersonalInfo(){
      const account = localStorage.getItem('userAccount')
      console.log(account)
      axios.get('http://39.101.75.128:8080/user/selectUserByAccount', {
        params:{
          account:account
        }
      })
          .then(response => {
            let data = null
            const dataList = response.data.data
            console.log(dataList)
            for(let i = 0;i<dataList.length;i++){
              if(dataList[i].account === account)data = dataList[i]
            }
            this.userInfo.username = data.account;
            this.userInfo.phone = data.phoneNumber
            this.userInfo.email = data.email
            this.userInfo.level = this.level[data.isMember]
            //console.log(data)
          })
          .catch(() => {
            // 请求发生错误，提示错误信息
            this.$message.error('info信息获取失败!');
          });
    }
  },
  created() {
    this.init();
  }
}
</script>

<style scoped>
.box-card{
  margin-top: 3vh;
  height: 60vh;

  &:deep(.el-card__header) {
     border: 0;
   }
}
.card-header{
  text-align: center;
}
.el-card__header{
  border-bottom: none;
}
</style>
